<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['controls', 'charteditor']}]}"></script>
<script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function() {
	google.load("visualization", "1", {packages:["corechart"]});

    var csv = $('#textInput').val();
    var data = $.csv.toArrays(csv, {
        onParseValue: $.csv.hooks.castToScalar
    });

    // Convert data for bar chart (summing all digits)
    var timeData = {};	// type -> table
    var funcRowMap;
    var maxDigit = 0;

    for (var i = 1; i < data.length; i++) {
    	var type = data[i][0];
   		var func = data[i][1];
      var digit = data[i][2];
   		var time = data[i][3];
   		if (timeData[type] == null) {
   			timeData[type] = [["Function", "Time (ns)"/*, { role: "style" }*/]];
        if (digit != 0)
   			  funcRowMap = {};
   		}

   		var table = timeData[type];
   		
      if (digit != 0) {
     		if (funcRowMap[func] == null)
     			funcRowMap[func] = table.push([func, 0]) - 1;
     		
     		table[funcRowMap[func]][1] += time;
      }
      else 
        table.push([func, time]);

      maxDigit = Math.max(maxDigit, digit);
    }

    // Compute average
    for (var type in timeData) {
      var table = timeData[type];
      for (var i = 1; i < table.length; i++)
        table[i][1] /= maxDigit;
    }

    // Convert data for drawing line chart per random digit
    var timeDigitData = {}; // type -> table
    var funcColumnMap;

    for (var i = 1; i < data.length; i++) {
    	var type = data[i][0];
   		var func = data[i][1];
		  var digit = data[i][2];
   		var time = data[i][3];

      if (digit == 0)
        continue;

   		if (timeDigitData[type] == null) {
   			timeDigitData[type] = [["Digit"]];
   			funcColumnMap = {};
   		}

   		var table = timeDigitData[type];

   		if (funcColumnMap[func] == null)
   			funcColumnMap[func] = table[0].push(func) - 1;

   		var row;
   		for (row = 1; row < table.length; row++)
   			if (table[row][0] == digit)
   				break;

    	if (row == table.length)
    		table.push([digit]);

		table[row][funcColumnMap[func]] = time;
	}

	for (var type in timeData) {
		$("#main").append(
      $("<a>", {name: type}),
      $("<h2>", {style: "padding-top: 70px; margin-top: -70px;"}).append(type)
    );

    $("#section").append($("<li>").append($("<a>", {href: "#" + type}).append(type)));

		drawTable(type, timeData[type]);
		drawBarChart(type, timeData[type]);
    if (timeDigitData[type] != null)
		  drawDigitChart(type, timeDigitData[type]);
	}

	$(".chart").each(function() {
		var chart = $(this);
		var d = $("#downloadDD").clone().css("display", "");
		$('li a', d).each(function() {
	        $(this).click(function() {
	            var svg = chart[0].getElementsByTagName('svg')[0].parentNode.innerHTML;
	            svg=sanitize(svg);
	            $('#imageFilename').val($("#title").html() + "_" + chart.data("filename"));
	            $('#imageGetFormTYPE').val($(this).attr('dltype'));
	            $('#imageGetFormSVG').val(svg);
	            $('#imageGetForm').submit();
	        });
	    });		
		$(this).after(d);
	});

  // Add configurations
  var thisConfig = "unknown_mac32_clang7.0";
  var configurations = ["corei7920@2.67_cygwin32_gcc4.8","corei7920@2.67_cygwin64_gcc4.8","corei7920@2.67_win32_vc2013","corei7920@2.67_win64_vc2013","unknown_mac32_clang7.0","unknown_mac64_clang7.0"];

  for (var i in configurations) {
    var c = configurations[i];
    $("#configuration").append($("<li>", {class : (c == thisConfig ? "active" : "")}).append($("<a>", {href: c + ".html"}).append(c)));
  }
});

function drawTable(type, timeData) {
	var data = google.visualization.arrayToDataTable(timeData);
    data.addColumn('number', 'Speedup');
    data.sort([{ column: 1, desc: true }]);
    var formatter1 = new google.visualization.NumberFormat({ fractionDigits: 3 });
    formatter1.format(data, 1);

	var div = document.createElement("div");
	div.className = "tablechart";
	$("#main").append(div);
    var table = new google.visualization.Table(div);
    redrawTable(0);
    table.setSelection([{ row: 0, column: null}]);

    function redrawTable(selectedRow) {
        // Compute relative time using the first row as basis
        var basis = data.getValue(selectedRow, 1);
        for (var rowIndex = 0; rowIndex < data.getNumberOfRows(); rowIndex++)
            data.setValue(rowIndex, 2, basis / data.getValue(rowIndex, 1));

        var formatter = new google.visualization.NumberFormat({suffix: 'x'});
        formatter.format(data, 2); // Apply formatter to second column

        table.draw(data);
    }

    google.visualization.events.addListener(table, 'select',
    function() {
        var selection = table.getSelection();
        if (selection.length > 0) {
            var item = selection[0];
            if (item.row != null)
                redrawTable(item.row);
        }
    });

}

function drawBarChart(type, timeData) {
    var defaultColors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"];

	var data = google.visualization.arrayToDataTable(timeData);
	data.addColumn({ type: "string", role: "style" })
	for (var rowIndex = 0; rowIndex < data.getNumberOfRows(); rowIndex++)
		data.setValue(rowIndex, 2, defaultColors[rowIndex]);

    data.sort([{ column: 1, desc: true }]);
	var options = { 
		title: type,
		chartArea: {'width': '70%', 'height': '70%'},
		width: 800,
		height: 300,
		legend: { position: "none" },
		hAxis: { title: "Time (ns)" }
	};
	var div = document.createElement("div");
	div.className = "chart";
	$(div).data("filename", type + "_time");
	$("#main").append(div);
	var chart = new google.visualization.BarChart(div);

	chart.draw(data, options);
}

function drawDigitChart(type, timeDigitData) {
	var data = google.visualization.arrayToDataTable(timeDigitData);

	var options = { 
		title: type,
		chartArea: {'width': '70%', 'height': '80%'},
		hAxis: {
			title: "Digit",
			gridlines: { count: timeDigitData.length - 1 },
			maxAlternation: 1,
			minTextSpacing: 0
		},
		vAxis: {
			title: "Time (ns) in log scale",
			logScale: true,
			minorGridlines: { count: 10 },
      baseline: 0
		},
		width: 800,
		height: 600
	};
	var div = document.createElement("div");
	div.className = "chart";
	$(div).data("filename", type + "_timedigit");
	$("#main").append(div);
	var chart = new google.visualization.LineChart(div);

	chart.draw(data, options);
}

// http://jsfiddle.net/P6XXM/
function sanitize(svg) {
    svg = svg
        .replace(/\<svg/,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1"')
        .replace(/zIndex="[^"]+"/g, '')
        .replace(/isShadow="[^"]+"/g, '')
        .replace(/symbolName="[^"]+"/g, '')
        .replace(/jQuery[0-9]+="[^"]+"/g, '')
        .replace(/isTracker="[^"]+"/g, '')
        .replace(/url\([^#]+#/g, 'url(#')
        .replace('<svg xmlns:xlink="http://www.w3.org/1999/xlink" ', '<svg ')
        .replace(/ href=/g, ' xlink:href=')
    /*.replace(/preserveAspectRatio="none">/g, 'preserveAspectRatio="none"/>')*/
    /* This fails in IE < 8
    .replace(/([0-9]+)\.([0-9]+)/g, function(s1, s2, s3) { // round off to save weight
    return s2 +'.'+ s3[0];
    })*/

    // IE specific
        .replace(/id=([^" >]+)/g, 'id="$1"')
        .replace(/class=([^" ]+)/g, 'class="$1"')
        .replace(/ transform /g, ' ')
        .replace(/:(path|rect)/g, '$1')
        .replace(/<img ([^>]*)>/gi, '<image $1 />')
        .replace(/<\/image>/g, '') // remove closing tags for images as they'll never have any content
        .replace(/<image ([^>]*)([^\/])>/gi, '<image $1$2 />') // closes image tags for firefox
        .replace(/width=(\d+)/g, 'width="$1"')
        .replace(/height=(\d+)/g, 'height="$1"')
        .replace(/hc-svg-href="/g, 'xlink:href="')
        .replace(/style="([^"]+)"/g, function (s) {
            return s.toLowerCase();
        });

    // IE9 beta bugs with innerHTML. Test again with final IE9.
    svg = svg.replace(/(url\(#highcharts-[0-9]+)&quot;/g, '$1')
        .replace(/&quot;/g, "'");
    if (svg.match(/ xmlns="/g).length == 2) {
        svg = svg.replace(/xmlns="[^"]+"/, '');
    }

    return svg;
}
</script>
<style type="text/css">
@media (min-width: 800px) {
  .container {
    max-width: 800px;
  }
}
textarea {
	font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.tablechart {
	width: 700px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
.chart {
	padding-top: 20px;
	padding-bottom: 20px;
}
body { padding-top: 70px; }
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="https://github.com/miloyip/dtoa-benchmark"><span class="glyphicon glyphicon-home"></span> dtoa-benchmark</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" id="configuration">
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Section <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" id="section">
          </ul>
        </li>
      </ul>
      <p class="navbar-text navbar-right">Developed by <a href="https://github.com/miloyip" class="navbar-link">Milo Yip</a></p>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="page-header">
<h1 id="title">unknown_mac32_clang7.0</h1>
</div>
<div id="main"></div>
<h2>Source CSV</h2>
<textarea id="textInput" class="form-control" rows="5" readonly>
Type,Function,Digit,Time(ns)
randomdigit,doubleconv,1,119.300000
randomdigit,doubleconv,2,133.000000
randomdigit,doubleconv,3,136.000000
randomdigit,doubleconv,4,146.000000
randomdigit,doubleconv,5,152.800000
randomdigit,doubleconv,6,161.500000
randomdigit,doubleconv,7,164.300000
randomdigit,doubleconv,8,173.700000
randomdigit,doubleconv,9,177.400000
randomdigit,doubleconv,10,185.300000
randomdigit,doubleconv,11,184.800000
randomdigit,doubleconv,12,199.400000
randomdigit,doubleconv,13,199.100000
randomdigit,doubleconv,14,214.000000
randomdigit,doubleconv,15,214.900000
randomdigit,doubleconv,16,225.000000
randomdigit,doubleconv,17,239.900000
randomdigit,emyg,1,74.800000
randomdigit,emyg,2,84.600000
randomdigit,emyg,3,91.300000
randomdigit,emyg,4,97.100000
randomdigit,emyg,5,107.800000
randomdigit,emyg,6,107.800000
randomdigit,emyg,7,113.900000
randomdigit,emyg,8,120.700000
randomdigit,emyg,9,125.600000
randomdigit,emyg,10,130.600000
randomdigit,emyg,11,136.500000
randomdigit,emyg,12,143.100000
randomdigit,emyg,13,147.900000
randomdigit,emyg,14,153.300000
randomdigit,emyg,15,159.800000
randomdigit,emyg,16,166.300000
randomdigit,emyg,17,173.200000
randomdigit,fpconv,1,171.800000
randomdigit,fpconv,2,190.500000
randomdigit,fpconv,3,208.000000
randomdigit,fpconv,4,222.500000
randomdigit,fpconv,5,233.900000
randomdigit,fpconv,6,244.900000
randomdigit,fpconv,7,257.100000
randomdigit,fpconv,8,263.100000
randomdigit,fpconv,9,266.700000
randomdigit,fpconv,10,271.400000
randomdigit,fpconv,11,275.700000
randomdigit,fpconv,12,279.600000
randomdigit,fpconv,13,283.700000
randomdigit,fpconv,14,288.000000
randomdigit,fpconv,15,292.300000
randomdigit,fpconv,16,297.200000
randomdigit,fpconv,17,310.800000
randomdigit,grisu2,1,151.500000
randomdigit,grisu2,2,165.600000
randomdigit,grisu2,3,170.100000
randomdigit,grisu2,4,175.600000
randomdigit,grisu2,5,179.800000
randomdigit,grisu2,6,186.600000
randomdigit,grisu2,7,193.200000
randomdigit,grisu2,8,200.000000
randomdigit,grisu2,9,206.800000
randomdigit,grisu2,10,212.800000
randomdigit,grisu2,11,218.700000
randomdigit,grisu2,12,226.000000
randomdigit,grisu2,13,230.600000
randomdigit,grisu2,14,237.700000
randomdigit,grisu2,15,244.100000
randomdigit,grisu2,16,251.700000
randomdigit,grisu2,17,264.400000
randomdigit,milo,1,87.400000
randomdigit,milo,2,96.400000
randomdigit,milo,3,101.300000
randomdigit,milo,4,108.000000
randomdigit,milo,5,117.300000
randomdigit,milo,6,116.500000
randomdigit,milo,7,122.700000
randomdigit,milo,8,129.500000
randomdigit,milo,9,134.100000
randomdigit,milo,10,140.100000
randomdigit,milo,11,146.100000
randomdigit,milo,12,152.500000
randomdigit,milo,13,157.600000
randomdigit,milo,14,163.400000
randomdigit,milo,15,168.500000
randomdigit,milo,16,175.800000
randomdigit,milo,17,184.400000
randomdigit,null,1,1.800000
randomdigit,null,2,1.800000
randomdigit,null,3,1.800000
randomdigit,null,4,1.800000
randomdigit,null,5,1.800000
randomdigit,null,6,1.800000
randomdigit,null,7,1.800000
randomdigit,null,8,1.800000
randomdigit,null,9,1.800000
randomdigit,null,10,1.800000
randomdigit,null,11,1.800000
randomdigit,null,12,1.800000
randomdigit,null,13,1.800000
randomdigit,null,14,1.800000
randomdigit,null,15,1.800000
randomdigit,null,16,1.800000
randomdigit,null,17,1.800000
randomdigit,ostringstream,1,1998.500000
randomdigit,ostringstream,2,2007.200000
randomdigit,ostringstream,3,2041.000000
randomdigit,ostringstream,4,2086.600000
randomdigit,ostringstream,5,2142.300000
randomdigit,ostringstream,6,2170.300000
randomdigit,ostringstream,7,2196.900000
randomdigit,ostringstream,8,2226.600000
randomdigit,ostringstream,9,2192.700000
randomdigit,ostringstream,10,2180.400000
randomdigit,ostringstream,11,2217.400000
randomdigit,ostringstream,12,2241.200000
randomdigit,ostringstream,13,2276.100000
randomdigit,ostringstream,14,2269.100000
randomdigit,ostringstream,15,2266.200000
randomdigit,ostringstream,16,2281.700000
randomdigit,ostringstream,17,2267.900000
randomdigit,ostrstream,1,1794.300000
randomdigit,ostrstream,2,1795.200000
randomdigit,ostrstream,3,1844.200000
randomdigit,ostrstream,4,1853.000000
randomdigit,ostrstream,5,1882.700000
randomdigit,ostrstream,6,1901.700000
randomdigit,ostrstream,7,1920.100000
randomdigit,ostrstream,8,1944.200000
randomdigit,ostrstream,9,1914.100000
randomdigit,ostrstream,10,1903.400000
randomdigit,ostrstream,11,1954.000000
randomdigit,ostrstream,12,1985.000000
randomdigit,ostrstream,13,2014.200000
randomdigit,ostrstream,14,1997.400000
randomdigit,ostrstream,15,2014.600000
randomdigit,ostrstream,16,2023.000000
randomdigit,ostrstream,17,1996.800000
randomdigit,sprintf,1,1512.900000
randomdigit,sprintf,2,1511.200000
randomdigit,sprintf,3,1561.200000
randomdigit,sprintf,4,1577.900000
randomdigit,sprintf,5,1612.100000
randomdigit,sprintf,6,1631.700000
randomdigit,sprintf,7,1645.900000
randomdigit,sprintf,8,1666.700000
randomdigit,sprintf,9,1639.200000
randomdigit,sprintf,10,1630.900000
randomdigit,sprintf,11,1674.600000
randomdigit,sprintf,12,1704.700000
randomdigit,sprintf,13,1724.900000
randomdigit,sprintf,14,1716.600000
randomdigit,sprintf,15,1730.000000
randomdigit,sprintf,16,1739.600000
randomdigit,sprintf,17,1729.200000
</textarea>
</div>
<div class="row" id="downloadDD" style="display: none">
<div class="btn-group pull-right" >
    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-picture"></span></button>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#" dltype="image/jpeg">JPEG</a></li>
        <li><a tabindex="-1" href="#" dltype="image/png">PNG</a></li>
        <li><a tabindex="-1" href="#" dltype="application/pdf">PDF</a></li>
        <li><a tabindex="-1" href="#" dltype="image/svg+xml">SVG</a></li>
    </ul>
</div>
</div>
<form method="post" action="http://export.highcharts.com/" id="imageGetForm">
    <input type="hidden" name="filename" id="imageFilename" value="" />
    <input type="hidden" name="type" id="imageGetFormTYPE" value="" />
    <input type="hidden" name="width" value="900" />
    <input type="hidden" name="svg" value="" id="imageGetFormSVG" />
</form>
</div>
</body>
</html>